import React, { Component } from 'react';
import img from './logo.svg';
import './MyTab.scss';

class MyTab extends Component {
    constructor(props){
        super(props);
        this.state={
            currentIndex:0,
            arr:[
                {
                    name:"活动专区",
                    list:[
                        {pic:img,name:"活动专区1"},
                        {pic:img,name:"活动专区2"},
                        {pic:img,name:"活动专区3"},
                        {pic:img,name:"活动专区4"},
                        {pic:img,name:"活动专区5"},
                        {pic:img,name:"活动专区6"},
                        {pic:img,name:"活动专区7"},
                        {pic:img,name:"活动专区8"},
                        {pic:img,name:"活动专区9"},
                        {pic:img,name:"活动专区7"},
                        {pic:img,name:"活动专区8"},
                        {pic:img,name:"活动专区9"},
                    ]
                },
                {
                    name:"品牌",
                    list:[
                        {pic:img,name:"品牌1"},
                        {pic:img,name:"品牌2"},
                        {pic:img,name:"品牌3"},
                        {pic:img,name:"品牌4"},
                        {pic:img,name:"品牌5"},
                        {pic:img,name:"品牌6"},
                        {pic:img,name:"品牌7"},
                        {pic:img,name:"品牌8"},
                        {pic:img,name:"品牌9"},
                        {pic:img,name:"品牌7"},
                        {pic:img,name:"品牌8"},
                        {pic:img,name:"品牌9"},
                    ]
                },
                {
                    name:"彩妆",
                    list:[
                        {pic:img,name:"彩妆1"},
                        {pic:img,name:"彩妆2"},
                        {pic:img,name:"彩妆3"},
                        {pic:img,name:"彩妆4"},
                        {pic:img,name:"彩妆5"},
                        {pic:img,name:"彩妆6"},
                        {pic:img,name:"彩妆7"},
                        {pic:img,name:"彩妆8"},
                        {pic:img,name:"彩妆9"},
                        {pic:img,name:"彩妆7"},
                        {pic:img,name:"彩妆8"},
                        {pic:img,name:"彩妆9"},
                    ]
                },
                {
                    name:"香水",
                    list:[
                        {pic:img,name:"香水1"},
                        {pic:img,name:"香水2"},
                        {pic:img,name:"香水3"},
                        {pic:img,name:"香水4"},
                        {pic:img,name:"香水5"},
                        {pic:img,name:"香水6"},
                        {pic:img,name:"香水7"},
                        {pic:img,name:"香水8"},
                        {pic:img,name:"香水9"},
                        {pic:img,name:"香水7"},
                        {pic:img,name:"香水8"},
                        {pic:img,name:"香水9"},
                    ]
                },
                {
                    name:"酒类",
                    list:[
                        {pic:img,name:"酒类1"},
                        {pic:img,name:"酒类2"},
                        {pic:img,name:"酒类3"},
                        {pic:img,name:"酒类4"},
                        {pic:img,name:"酒类5"},
                        {pic:img,name:"酒类6"},
                        {pic:img,name:"酒类7"},
                        {pic:img,name:"酒类8"},
                        {pic:img,name:"酒类9"},
                        {pic:img,name:"酒类7"},
                        {pic:img,name:"酒类8"},
                        {pic:img,name:"酒类9"},
                    ]
                },
                {
                    name:"腕表首饰",
                    list:[
                        {pic:img,name:"腕表首饰1"},
                        {pic:img,name:"腕表首饰2"},
                        {pic:img,name:"腕表首饰3"},
                        {pic:img,name:"腕表首饰4"},
                        {pic:img,name:"腕表首饰5"},
                        {pic:img,name:"腕表首饰6"},
                        {pic:img,name:"腕表首饰7"},
                        {pic:img,name:"腕表首饰8"},
                        {pic:img,name:"腕表首饰9"},
                        {pic:img,name:"腕表首饰7"},
                        {pic:img,name:"腕表首饰8"},
                        {pic:img,name:"腕表首饰9"},
                    ]
                },
                {
                    name:"服饰箱包",
                    list:[
                        {pic:img,name:"服饰箱包1"},
                        {pic:img,name:"服饰箱包2"},
                        {pic:img,name:"服饰箱包3"},
                        {pic:img,name:"服饰箱包4"},
                        {pic:img,name:"服饰箱包5"},
                        {pic:img,name:"服饰箱包6"},
                        {pic:img,name:"服饰箱包7"},
                        {pic:img,name:"服饰箱包8"},
                        {pic:img,name:"服饰箱包9"},
                        {pic:img,name:"服饰箱包7"},
                        {pic:img,name:"服饰箱包8"},
                        {pic:img,name:"服饰箱包9"},
                    ]
                },
                {
                    name:"食品保健",
                    list:[
                        {pic:img,name:"食品保健1"},
                        {pic:img,name:"食品保健2"},
                        {pic:img,name:"食品保健3"},
                        {pic:img,name:"食品保健4"},
                        {pic:img,name:"食品保健5"},
                        {pic:img,name:"食品保健6"},
                        {pic:img,name:"食品保健7"},
                        {pic:img,name:"食品保健8"},
                        {pic:img,name:"食品保健9"},
                        {pic:img,name:"食品保健7"},
                        {pic:img,name:"食品保健8"},
                        {pic:img,name:"食品保健9"},
                    ]
                },
            ],
        }
    }
    handleClick(index){
        // 要想更新组件状态就必须调用setState（）
        this.setState({
            // 不用进行赋值
            currentIndex:index
        },()=>{
            console.log(this.state.currentIndex)
        })
    }

    render() {
        return (
            <div className='bigbox'>
                <input type="text"  className='inp' placeholder='请输入你想搜索的商品'/> 
                <div className='mytab'>
                <div className='left'>
                    {
                        this.state.arr.map((item,index)=>{
                            return (
                                // 想要保持根节点只有一个，用<></>来包裹
                                <div className={`btn ${this.state.currentIndex === index ? 'active':''} `}  key={index} onClick={
                                    ()=>{this.handleClick(index)}}>{item.name}</div>
                            )
                        })
                    }
                </div>
                <div className='right'>
                    {
                        // 渲染右侧列表
                        this.state.arr[this.state.currentIndex].list.map((item,index)=>{
                            return (
                                <div className='item' key={index}>
                                    <img src={item.pic} alt="" />
                                    <div className='name'>{item.name}</div>
                                </div>
                            )
                        })
                    }
                </div>    
            </div>
            </div>
            
        );
    }
}


export default MyTab;